<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-row :gutter="8">
                <el-col :span="8">
                    <el-input placeholder="请输入名称" v-model="queryInfo.query" @keydown.enter.native="getGoodsList" @clear="getGoodsList" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addGoodsPage">添加商品</el-button>
                </el-col>
            </el-row>
            <el-table :data="goodsList" row-key="goods_id" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="名称" prop="goods_name"></el-table-column>
                <el-table-column label="价格(元)" prop="goods_price" width="95px"></el-table-column>
                <el-table-column label="重量" prop="goods_weight" width="70px"></el-table-column>
                <el-table-column label="创建时间" prop="add_time" width="128px">
                    <template slot-scope="scope">{{scope.row.add_time|dateFormat}}</template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 10, 20, 50]"
                :page-size="queryInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() { 
            return {
                queryInfo: {
                    query: '',
                    pagenum: 1,
                    pagesize: 10
                },
                total: 0,
                goodsList: [],
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            async getGoodsList() {
                const {data:res} = await this.$http.get('goods',{params: this.queryInfo});
                if(res.meta.status!=200) {
                    return this.$message.error('获取商品列表失败：'+res.meta.msg);
                }
                console.log('goods',res);
                // res.data.goods.forEach(good => {
                //     good.add_time=new Date(parseInt(good.add_time));
                // });
                this.goodsList=res.data.goods;
                this.queryInfo.pagenum=parseInt(res.data.pagenum);
                this.total=res.data.total;
            },
            handleSizeChange(newSize) {
                this.queryInfo.pagesize=newSize;
                this.getGoodsList();
            },
            handleCurrentChange(pagenum) {
                console.log('pagenum',pagenum)
                this.queryInfo.pagenum=pagenum;
                this.getGoodsList();
            },
            async remove(goods) {
                const confirm=await this.$confirm('确定要删除此商品吗？').catch(err=>err);
                if(confirm==='confirm'){
                    const {data:res} = await this.$http.delete('goods/'+goods.goods_id);
                    if(res.meta.status!==200) {
                        return this.$message.error('删除失败:'+res.meta.msg);
                    }
                    this.getGoodsList();
                }
            },
            edit(goods) {
                this.$router.push('/goods/edit/'+goods.goods_id);
            },
            addGoodsPage() {
                this.$router.push('/goods/add');
            }

        }
    }
</script>

<style lang="less" scoped>

</style>